<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
        Java-front-VUE-1 - rulerLwx Blog
      </title>
        <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    
    <meta name="theme-color" content="#000000" />
    
    <meta http-equiv="window-target" content="_top" />
    
    
    <meta name="description" content="概述 学习资料： 黑马 https://www.bilibili.com/video/av50680998 尚硅谷VUE核心技术视频 ~~https://www.bilibili.com/video/av24099073~~ ~~https://www.bilibili.com/video/av67171816/?p=3~~ 官网： 中文：https://cn.vuejs.org/ 英文：https://vuejs.or" />
    <meta name="generator" content="Hugo 0.73.0 with theme pure" />
    <title>Java-front-VUE-1 - rulerLwx Blog</title>
    
    
    <link rel="stylesheet" href="https://rulerLwx.gitee.io/css/style.min.c4bc7071f132c964c2116bca53b392933f377e5ca7b7051ed245187c621a2d3e.css">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/9.15.10/styles/github.min.css" async>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css" async>
    <meta property="og:title" content="Java-front-VUE-1" />
<meta property="og:description" content="概述 学习资料： 黑马 https://www.bilibili.com/video/av50680998 尚硅谷VUE核心技术视频 ~~https://www.bilibili.com/video/av24099073~~ ~~https://www.bilibili.com/video/av67171816/?p=3~~ 官网： 中文：https://cn.vuejs.org/ 英文：https://vuejs.or" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://rulerLwx.gitee.io/2020/07/java-front-vue-1/" />
<meta property="article:published_time" content="2020-07-01T18:58:47+08:00" />
<meta property="article:modified_time" content="2020-07-01T18:58:47+08:00" />
<meta itemprop="name" content="Java-front-VUE-1">
<meta itemprop="description" content="概述 学习资料： 黑马 https://www.bilibili.com/video/av50680998 尚硅谷VUE核心技术视频 ~~https://www.bilibili.com/video/av24099073~~ ~~https://www.bilibili.com/video/av67171816/?p=3~~ 官网： 中文：https://cn.vuejs.org/ 英文：https://vuejs.or">
<meta itemprop="datePublished" content="2020-07-01T18:58:47&#43;08:00" />
<meta itemprop="dateModified" content="2020-07-01T18:58:47&#43;08:00" />
<meta itemprop="wordCount" content="4620">



<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Java-front-VUE-1"/>
<meta name="twitter:description" content="概述 学习资料： 黑马 https://www.bilibili.com/video/av50680998 尚硅谷VUE核心技术视频 ~~https://www.bilibili.com/video/av24099073~~ ~~https://www.bilibili.com/video/av67171816/?p=3~~ 官网： 中文：https://cn.vuejs.org/ 英文：https://vuejs.or"/>

    <!--[if lte IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
      <![endif]-->

    <!--[if lt IE 9]>
        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
      <![endif]-->
  </head>

  
  

  <body class="main-center theme-black" itemscope itemtype="http://schema.org/WebPage"><header class="header" itemscope itemtype="http://schema.org/WPHeader">
    <div class="slimContent">
      <div class="navbar-header">
        <div class="profile-block text-center">
          <a id="avatar" href="https://gitee.com/rulerLwx" target="_blank">
            <img class="img-circle img-rotate" src="https://rulerLwx.gitee.io/avatar.png" width="200" height="200">
          </a>
          <h2 id="name" class="hidden-xs hidden-sm">rulerLwx</h2>
          <h3 id="title" class="hidden-xs hidden-sm hidden-md">thinking...</h3>
          <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i>Guangzhou, China</small>
        </div><div class="search" id="search-form-wrap">
    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="Search" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i
                        class="icon icon-search"></i></button>
            </span>
        </div>
        <div class="ins-search">
            <div class="ins-search-mask"></div>
            <div class="ins-search-container">
                <div class="ins-input-wrapper">
                    <input type="text" class="ins-search-input" placeholder="Type something..."
                        x-webkit-speech />
                    <button type="button" class="close ins-close ins-selectable" data-dismiss="modal"
                        aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <div class="ins-section-wrapper">
                    <div class="ins-section-container"></div>
                </div>
            </div>
        </div>
    </form>
</div>
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
        <ul class="nav navbar-nav main-nav">
            <li class="menu-item menu-item-home">
                <a href="/">
                    <i class="icon icon-home-fill"></i>
                  <span class="menu-title">Home</span>
                </a>
            </li>
            <li class="menu-item menu-item-archives">
                <a href="/posts/">
                    <i class="icon icon-archives-fill"></i>
                  <span class="menu-title">Archives</span>
                </a>
            </li>
            <li class="menu-item menu-item-categories">
                <a href="/categories/">
                    <i class="icon icon-folder"></i>
                  <span class="menu-title">Categories</span>
                </a>
            </li>
            <li class="menu-item menu-item-tags">
                <a href="/tags/">
                    <i class="icon icon-tags"></i>
                  <span class="menu-title">Tags</span>
                </a>
            </li>
            <li class="menu-item menu-item-about">
                <a href="/about/">
                    <i class="icon icon-cup-fill"></i>
                  <span class="menu-title">About</span>
                </a>
            </li>
        </ul>
      </nav>
    </div>
  </header>

<aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">Board</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">enjoy~
            </div>
        </div>
    </div>
</div>

      <div class="widget">
    <h3 class="widget-title"> Categories</h3>
    <div class="widget-body">
        <ul class="category-list">
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-framework/" class="category-list-link">java-framework</a><span class="category-list-count">38</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-front-end/" class="category-list-link">java-front-end</a><span class="category-list-count">11</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-se/" class="category-list-link">java-se</a><span class="category-list-count">21</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-senior/" class="category-list-link">java-senior</a><span class="category-list-count">4</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/linux/" class="category-list-link">linux</a><span class="category-list-count">13</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/tools/" class="category-list-link">tools</a><span class="category-list-count">1</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/%E6%8A%80%E6%9C%AF%E6%9D%82%E7%83%A9/" class="category-list-link">技术杂烩</a><span class="category-list-count">4</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/%E6%95%B0%E6%8D%AE%E5%BA%93/" class="category-list-link">数据库</a><span class="category-list-count">15</span></li>
        </ul>
    </div>
</div>
      <div class="widget">
    <h3 class="widget-title"> Tags</h3>
    <div class="widget-body">
        <ul class="tag-list">
            
            
            <li class="tag-list-item"><a href="https://rulerLwx.gitee.io/tags/jvm/" class="tag-list-link">jvm</a><span
                    class="tag-list-count">1</span></li>
            
            
            <li class="tag-list-item"><a href="https://rulerLwx.gitee.io/tags/%E5%A4%9A%E7%BA%BF%E7%A8%8B/" class="tag-list-link">多线程</a><span
                    class="tag-list-count">2</span></li>
            
            
            <li class="tag-list-item"><a href="https://rulerLwx.gitee.io/tags/%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B/" class="tag-list-link">网络编程</a><span
                    class="tag-list-count">3</span></li>
            
        </ul>

    </div>
</div>
      
<div class="widget">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget-body">
        <ul class="recent-post-list list-unstyled no-thumbnail">
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E4%B8%80%E6%89%B9%E9%87%8F%E7%A7%BB%E5%8A%A8%E9%87%8D%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6/" class="title">自己动手（一）——批量移动、重命名文件</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-27 17:50:02 &#43;0800 CST" itemprop="datePublished">2020-07-27</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E5%85%B3%E4%BA%8Einteger%E7%9A%84-128~127%E7%BC%93%E5%AD%98/" class="title">关于Integer的 -128~127缓存</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-11 16:56:21 &#43;0800 CST" itemprop="datePublished">2020-07-11</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98/" class="title">跨域问题</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-08 22:41:12 &#43;0800 CST" itemprop="datePublished">2020-07-08</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/" class="title">个人博客搭建</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-05 18:58:47 &#43;0800 CST" itemprop="datePublished">2020-07-05</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/centos/" class="title">CentOS-</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-01 18:58:47 &#43;0800 CST" itemprop="datePublished">2020-07-01</time>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>
  </div>
</aside>

    
    
<aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    <h4 class="toc-title">Catalogue</h4>
    <nav id="toc" class="js-toc toc">

    </nav>
  </div>
</aside>
<main class="main" role="main"><div class="content">
  <article id="-" class="article article-type-" itemscope
    itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      <h1 itemprop="name">
  <a
    class="article-title"
    href="/2020/07/java-front-vue-1/"
    >Java-front-VUE-1</a
  >
</h1>

      <div class="article-meta">
        
<span class="article-date">
  <i class="icon icon-calendar-check"></i>&nbsp;
<a href="https://rulerLwx.gitee.io/2020/07/java-front-vue-1/" class="article-date">
  <time datetime="2020-07-01 18:58:47 &#43;0800 CST" itemprop="datePublished">2020-07-01</time>
</a>
</span>
<span class="article-category">
  <i class="icon icon-folder"></i>&nbsp;
  <a class="article-category-link" href="/categories/java-front-end/"> Java-front-end </a>
</span>

        <span class="post-comment"><i class="icon icon-comment"></i>&nbsp;<a href="/2020/07/java-front-vue-1/#comments"
            class="article-comment-link">Comments</a></span>
		<span class="post-wordcount hidden-xs" itemprop="wordCount">Word Count: 4620words</span>
		<span class="post-readcount hidden-xs" itemprop="timeRequired">Read Count: 10minutes </span>
      </div>
    </div>
    <div class="article-entry marked-body js-toc-content" itemprop="articleBody">
      <h1 id="概述">概述</h1>
<p>学习资料：</p>
<ul>
<li>黑马 <a href="https://www.bilibili.com/video/av50680998">https://www.bilibili.com/video/av50680998</a></li>
<li>尚硅谷VUE核心技术视频 ~~<a href="https://www.bilibili.com/video/av24099073~~">https://www.bilibili.com/video/av24099073~~</a></li>
<li>~~<a href="https://www.bilibili.com/video/av67171816/?p=3~~">https://www.bilibili.com/video/av67171816/?p=3~~</a></li>
</ul>
<p>官网：</p>
<ul>
<li>中文：https://cn.vuejs.org/</li>
<li>英文：https://vuejs.org/</li>
</ul>
<h2 id="什么是-vue">什么是 vue</h2>
<p>vue 是渐进式 JavaScript 框架。 vue 不提倡操作 dom。javascript/jquery 是经常操作 dom 的。</p>
<h2 id="框架和库的区别">框架和库的区别</h2>
<ul>
<li>框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。</li>
<li>库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求
<ul>
<li>从Jquery 切换到 Zepto</li>
<li>从 EJS 切换到 art-template</li>
</ul>
</li>
</ul>
<h2 id="mvc-与-前端中的-mvvm-之间的区别">MVC 与 前端中的 MVVM 之间的区别</h2>
<p>MVC解释:
<img src="E6FEBB460DDB4D0B99B524312DD6EC4A" alt="image"></p>
<hr>
<p>MVVM 的解释：
<img src="6BE30BC3BEA443BCA9AAD08A71271989" alt="image"></p>
<p>总结：VM 是 MVVM 思想的核心。</p>
<h1 id="入门">入门</h1>
<h2 id="第一个程序">第一个程序</h2>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
  &lt;title&gt;Document&lt;/title&gt;
  &lt;!-- 1. 导入Vue的包 --&gt;
  &lt;script src=&quot;./lib/vue-2.4.0.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 --&gt;
  &lt;!-- Vue 实例所控制的这个元素区域，就是我们的 V  --&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;p&gt;{{ msg }}&lt;/p&gt;
  &lt;/div&gt;

  &lt;script&gt;
    // 2. 创建一个Vue的实例
    // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    var vm = new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据
        msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
      }
    })
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html
</code></pre>
<p>注意：<code>el</code>是英文，不是英文<code>e</code>+数字<code>1</code>。——20190921</p>
<p>参考《vue教程-黑马-205集完整版》</p>
<p>总结：</p>
<ul>
<li>定义一个 div ，所有需要 vue 操作的元素都需要包含在 div 区域内，否则不起作用。<strong>初学者常犯的错误</strong>。</li>
<li>2.x版本之后，不要给 body 标签加 id=&quot;app&rdquo;。</li>
<li>如果要访问 data 中的数据，或要访问 methods 中的方法，必须带上 this ——20190922</li>
</ul>
<h2 id="v-cloakv-textv-html">v-cloak/v-text/v-html</h2>
<p>解决闪烁问题</p>
<p>1）v-cloak</p>
<pre><code class="language-html">&gt;&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;p v-clock&gt;{{msg}} &lt;/p&gt;
        &lt;h4 v-text=&quot;msg&quot;&gt;&lt;/h4&gt;
        &lt;div v-html=&quot;msg2&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
        new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'&lt;h1&gt;我是H1&lt;/h1&gt;'
            }
        })
    &lt;/script&gt;
&lt;/body
</code></pre>
<p>v-cloak 只插值，不覆盖内容</p>
<p>2）v-text</p>
<p>3）v-html</p>
<h2 id="v-bind">v-bind</h2>
<p><code>v-bind:</code> 用于属性绑定</p>
<ul>
<li><code>&gt;&lt;input type=&quot;button&quot; value=&quot;点击&quot; v-bind:title=&quot;mytitle&quot;/&gt;</code></li>
<li><code>&lt;input type=&quot;button&quot; value=&quot;点击&quot; v-bind:title=&quot;mytitle + 123&quot;/&gt;</code> 可以拼接</li>
<li><code>&lt;input type=&quot;button&quot; value=&quot;点击&quot; :title=&quot;mytitle&quot;/&gt;</code></li>
</ul>
<p><code>v-bind:</code>可以简写为<code>:</code></p>
<h2 id="v-on">v-on</h2>
<pre><code class="language-html">&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;p v-clock&gt;{{msg}} &lt;/p&gt;
        &lt;h4 v-text=&quot;msg&quot;&gt;&lt;/h4&gt;
        &lt;div v-html=&quot;msg2&quot;&gt;&lt;/div&gt;
        &lt;input type=&quot;button&quot; value=&quot;点击&quot; v-bind:title=&quot;mytitle&quot;/&gt;
        &lt;input type=&quot;button&quot; value=&quot;按钮&quot; v-on:click=&quot;show&quot;/&gt;
    &lt;/div&gt;
    &lt;script&gt;
        new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'&lt;h1&gt;我是H1&lt;/h1&gt;',
                mytitle:'自定义的title'
            },
            methods:{
                show:function(){
                    alert(&quot;hello&quot;)
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p><code>&lt;input type=&quot;button&quot; value=&quot;按钮&quot; v-on:click=&quot;show&quot;/&gt;</code></p>
<p>注意：不是<code>v-on:onclick=&quot;show&quot;</code></p>
<p><code>v-on:</code>可以缩写成<code>@</code></p>
<h2 id="跑马灯效果">跑马灯效果</h2>
<p>知识点：</p>
<p>1）didiao(){}是使用了es6的写法，省略了function</p>
<pre><code class="language-java">  methods:{
      lang:function(){
          alert(&quot;hello&quot;);
      },
      didiao(){
          alert(&quot;didiao&quot;);
      }
  }
</code></pre>
<p>2）注意<code>this</code>指针指向</p>
<pre><code class="language-js">    methods:{
        lang(){
        // 此处的 _this = this 指向 vm 实例
            var _this = this;
            setInterval(function () {
                var start = _this.msg.substr(0, 1);
                var end = _this.msg.substr(1);
                _this.msg = end + start;
            },400)
        }
        lang(){
        //下面是es6的写法，等同于上面 _this 的写法
        //此时的指针指向外面的 vm 实例
            setInterval(() =&gt; {
                var start = this.msg.substr(0, 1);
                var end = this.msg.substr(1);
                this.msg = end + start;
            },400)
        }
    }
</code></pre>
<p>注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名  或  this.方法名 来进行访问，这里的this，就表示 我们 new 出来的  VM 实例对象</p>
<p>思路分析：</p>
<ol>
<li>给 【浪起来】 按钮，绑定一个点击事件   v-on   @</li>
<li>在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；</li>
<li>为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；</li>
</ol>
<p>代码实现：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;跑马灯效果&lt;/title&gt;
    &lt;script src=&quot;../js/vue.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;input value=&quot;浪起来&quot; type=&quot;button&quot; @click=&quot;lang&quot;/&gt;
        &lt;input value=&quot;低调&quot; type=&quot;button&quot; @click=&quot;stop&quot;/&gt;
        &lt;h4&gt;{{msg}}&lt;/h4&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm = new Vue({
            el:'#app',
            data:{
                msg: '猥琐发育，别浪~~~',
                intervalId:null
            },
            methods:{
                lang(){
                    if (this.intervalId != null) {
                        return;
                    }
                    // 每次调用setInterval()方法，都返回ID
                    this.intervalId = setInterval(() =&gt; {
                        var start = this.msg.substr(0, 1);
                        var end = this.msg.substr(1);
                        this.msg = end + start;
                    },400);
                },
                stop(){
                    clearInterval(this.intervalId);
                    // 停止后，需将intervalId置为null
                    this.intervalId = null;
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h2 id="事件修饰符">事件修饰符</h2>
<ul>
<li>.stop       阻止冒泡</li>
<li>.prevent    阻止默认事件</li>
<li>.capture    添加事件侦听器时使用事件捕获模式</li>
<li>.self       只当事件在该元素本身（比如不是子元素）触发时触发回调</li>
<li>.once       事件只触发一次</li>
</ul>
<p>1）.stop</p>
<p>事件冒泡：里面（层）的事件传递给外面（层）</p>
<p><img src="2CE5BBC8730945309C4CEB14183299D6" alt="image"></p>
<p>使用.stop停止冒泡 <code>&lt;input type=&quot;button&quot; value=&quot;戳它&quot; @click.stop=&quot;btnHandler&quot;&gt;</code></p>
<pre><code class="language-html">&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;div class=&quot;inner&quot; @click=&quot;divHandler&quot;&gt;
            &lt;input type=&quot;button&quot; value=&quot;戳它&quot; @click.stop=&quot;btnHandler&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{
                divHandler(){
                    console.log(&quot;这是触发了 divHandler 的点击事件&quot;)
                },
                btnHandler(){
                    console.log(&quot;这是触发了 btnHandler 的点击事件&quot;)
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>2）.prevent</p>
<pre><code class="language-html">    &lt;div id=&quot;app&quot;&gt;
        &lt;a href=&quot;https://www.baidu.com&quot; @click.prevent=&quot;linkClick&quot;&gt;有问题，去百度&lt;/a&gt;
    &lt;/div&gt;
</code></pre>
<pre><code>var vm = new Vue({
    el:'#app',
    data:{},
    methods:{
        linkClick(){
            console.log(&quot;这是触发了 linkClick 的点击事件&quot;);
            alert(&quot;prevent&quot;)
        }
    }
})
</code></pre>
<p>注意：事件一定要交给 vue 来管理才行，也就是，事件所发生区域一定要在<code>el:'#app'</code>这个区域内！！！</p>
<p>3）.capture</p>
<p>事件从 外层 到 里层 触发事件</p>
<p>与“事件冒泡”顺序相反</p>
<p>4）.self</p>
<p>只当事件在该元素本身（比如不是子元素）触发时触发回调</p>
<p>5）.once</p>
<p>事件只触发一次</p>
<hr>
<p>问：<code>.self</code>和<code>.stop</code>的区别？</p>
<p>答：<code>.self</code>只会阻止自己身上的冒泡行为，并不会真正阻止冒泡行为</p>
<h2 id="v-model">v-model</h2>
<p>原理：在 Vue 中，已经实现了数据的双向绑定（M 和 V 之间），每当我们修改了 data 中的数据，vue 会默认监听到数据的改动，自动将最新的数据应用到页面上；页面上修改的数据也会自动应用到 data 中。</p>
<ul>
<li><code>v-model=&quot;&quot;</code> 可以双向数据绑定</li>
<li><code>v-bind:</code>只能实现数据的单向绑定，从 M 自动绑定到 V</li>
</ul>
<p>注意：<code>v-model=&quot;&quot;</code><strong>只能应用在表单元素</strong>中</p>
<p>示例：</p>
<pre><code class="language-html">&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;h4&gt;{{msg}}&lt;/h4&gt;
        &lt;input type=&quot;text&quot; v-model=&quot;msg&quot;&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'我们都是好学生'
            },
            methods:{}
        })
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>效果图如下：
<img src="A232702B32D54BCB9387D71FF38090B8" alt="image"></p>
<p>示例，简易计算器的实现：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;v-model实现简易计算器&lt;/title&gt;
    &lt;script src=&quot;../js/vue.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;input type=&quot;text&quot; v-model=&quot;n1&quot;&gt;
        &lt;select v-model=&quot;opt&quot;&gt;
            &lt;option value=&quot;+&quot;&gt;+&lt;/option&gt;
            &lt;option value=&quot;-&quot;&gt;-&lt;/option&gt;
            &lt;option value=&quot;*&quot;&gt;*&lt;/option&gt;
            &lt;option value=&quot;/&quot;&gt;/&lt;/option&gt;
        &lt;/select&gt;
        &lt;input type=&quot;text&quot; v-model=&quot;n2&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;=&quot; @click=&quot;calc&quot;/&gt;
        &lt;input type=&quot;text&quot; v-model=&quot;result&quot;/&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm = new Vue({
            el:'#app',
            data:{
                n1:'0',
                opt: '+',
                n2:'0',
                result:'0'
            },
            methods:{
                calc(){
                    switch (this.opt) {
                        case &quot;+&quot;:
                            // 输入校验，todo...
                            this.result = parseInt(this.n1) + parseInt(this.n2);
                            break;
                        case &quot;-&quot;:
                            this.result = parseInt(this.n1) - parseInt(this.n2);
                            break;
                        case &quot;*&quot;:
                            this.result = parseInt(this.n1) * parseInt(this.n2);
                            break;
                        case &quot;/&quot;:
                            this.result = parseInt(this.n1) / parseInt(this.n2);
                            break;
                        default:
                            break;
                    }
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果如下：</p>
<p><img src="8A2E4783D00F4E4EB7D118D3FA830D7F" alt="image"></p>
<h2 id="在vue-中使用样式">在Vue 中使用样式</h2>
<p>示例代码：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;vue中使用样式-class&lt;/title&gt;
    &lt;script src=&quot;../js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;style&gt;
        .red {
            color: red;
        }
        .thin {
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 0.5em;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;!--以前的class样式使用方法--&gt;
        &lt;h1 class=&quot;red thin&quot;&gt;这是一个很大很大的H1&lt;/h1&gt;
        &lt;!--vue方式，数组--&gt;
        &lt;h1 :class=&quot;['red','thin']&quot;&gt;这是一个很大很大的H1&lt;/h1&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{}
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3 id="使用class样式">使用class样式</h3>
<p>语法：<code>v-bind:class=&quot;&quot;</code>，或缩写成 <code>:class=&quot;&quot;</code></p>
<ol>
<li>数组
<pre><code>&lt;h1 :class=&quot;['red', 'thin']&quot;&gt;这是一个邪恶的H1&lt;/h1&gt;
</code></pre>
</li>
<li>数组中使用三元表达式
<pre><code>&lt;h1 :class=&quot;['red', 'thin', isactive?'active':'']&quot;&gt;这是一个邪恶的H1&lt;/h1&gt;
</code></pre>
</li>
</ol>
<p>isactive 是 data 中的一个布尔值</p>
<ol start="3">
<li>
<p>数组中嵌套对象</p>
<pre><code>&lt;h1 :class=&quot;['red', 'thin', {'active': isactive}]&quot;&gt;这是一个邪恶的H1&lt;/h1&gt;
</code></pre>
</li>
<li>
<p>直接使用对象</p>
<pre><code>&lt;h1 :class=&quot;{red:true, italic:true, active:true, thin:true}&quot;&gt;这是一个邪恶的H1&lt;/h1&gt;
</code></pre>
</li>
</ol>
<h3 id="使用内联样式">使用内联样式</h3>
<p>语法：<code>v-bind:style=&quot;&quot;</code>，或缩写成 <code>:style=&quot;&quot;</code></p>
<ol>
<li>
<p>直接在元素上通过 <code>:style</code> 的形式，书写样式对象</p>
<pre><code>&lt;h1 :style=&quot;{color: 'red', 'font-size': '40px'}&quot;&gt;这是一个善良的H1&lt;/h1&gt;
</code></pre>
</li>
<li>
<p>将样式对象，定义到 <code>data</code> 中，并直接引用到 <code>:style</code> 中</p>
<ul>
<li>在data上定义样式：</li>
</ul>
<pre><code>data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
</code></pre>
<ul>
<li>在元素中，通过属性绑定的形式，将样式对象应用到元素中：</li>
</ul>
<pre><code>&lt;h1 :style=&quot;h1StyleObj&quot;&gt;这是一个善良的H1&lt;/h1&gt;
</code></pre>
</li>
<li>
<p>在 <code>:style</code> 中通过数组，引用多个 <code>data</code> 上的样式对象</p>
<ul>
<li>在data上定义样式：</li>
</ul>
<pre><code>data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}
</code></pre>
<ul>
<li>在元素中，通过属性绑定的形式，将样式对象应用到元素中：</li>
</ul>
<pre><code>&lt;h1 :style=&quot;[h1StyleObj, h1StyleObj2]&quot;&gt;这是一个善良的H1&lt;/h1&gt;
</code></pre>
</li>
</ol>
<h2 id="v-for">v-for</h2>
<p>1）遍历数组</p>
<pre><code class="language-html">&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;p v-for=&quot;item in list&quot;&gt;{{item}}&lt;/p&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm = new Vue({
            el:'#app',
            data:{
                list:[1,2,3,4,5,6]
            },
            methods:{}
        })
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>页面效果：</p>
<pre><code class="language-html">1
2
3
4
5
6
</code></pre>
<p>2）循环数组，并拿到索引值</p>
<pre><code class="language-html">&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;p v-for=&quot;(item,i) in list&quot;&gt;索引：{{i}}，值：{{item}}&lt;/p&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm = new Vue({
            el:'#app',
            data:{
                list:[1,2,3,4,5,6]
            },
            methods:{}
        })
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>页面效果：</p>
<pre><code>索引：0，值：1
索引：1，值：2
索引：2，值：3
索引：3，值：4
索引：4，值：5
索引：5，值：6
</code></pre>
<p>3）循环对象数组</p>
<pre><code class="language-html">&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;p v-for=&quot;user in list&quot;&gt;{{user.id}},{{user.name}}&lt;/p&gt;
        &lt;!--拿到索引--&gt;
        &lt;p v-for=&quot;(user,i) in list&quot;&gt;{{user.id}},{{user.name}},索引：{{i}}&lt;/p&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'zs1'},
                    {id:2,name:'zs2'},
                    {id:3,name:'zs3'},
                    {id:4,name:'zs4'}
                ]
            },
            methods:{}
        })
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>4）遍历对象属性</p>
<pre><code class="language-html">&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;!--(val,key)，对象属性的值在前面，名称在后面--&gt;
        &lt;p v-for=&quot;(val,key) in user&quot;&gt;{{val}},{{key}}&lt;/p&gt;
        &lt;!--对象的索引--&gt;
        &lt;p v-for=&quot;(val,key,i) in user&quot;&gt;{{val}},{{key}},索引：{{i}}&lt;/p&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm = new Vue({
            el:'#app',
            data:{
                user:{
                    id:1,
                    name:'托尼·波斯顿',
                    gender:'男'
                }
            },
            methods:{}
        })
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>5）循环数字</p>
<pre><code class="language-html">&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;!--数字从 1 开始--&gt;
        &lt;p v-for=&quot;count in 10&quot;&gt;{{count}}&lt;/p&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm = new Vue({
            el:'#app',
            data:{}
        })
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>6）绑定 key</p>
<p>指定唯一个字符/数字为key</p>
<pre><code class="language-html">&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;label&gt;
            ID：&lt;input type=&quot;text&quot; v-model=&quot;id&quot;&gt;
        &lt;/label&gt;
        &lt;label&gt;
            Name：&lt;input type=&quot;text&quot; v-model=&quot;name&quot;&gt;
        &lt;/label&gt;
        &lt;input type=&quot;button&quot; value=&quot;添加&quot; @click=&quot;add&quot;/&gt;
        &lt;!--绑定key，指定唯一的字符或数字为key--&gt;
        &lt;p v-for=&quot;item in list&quot; :key=&quot;item.id&quot;&gt;
            &lt;input type=&quot;checkbox&quot;&gt;{{item.id}}---{{item.name}}
        &lt;/p&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm = new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                list:[
                    {id:1,name:'李斯'},
                    {id:2,name:'赢政'},
                    {id:3,name:'越高'},
                    {id:4,name:'韩非'},
                    {id:5,name:'荀子'}
                ]
            },
            methods:{
                add(){
                    // 判断重复添加，todo...
                    this.list.push({id:this.id,name:this.name})
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>效果如下：</p>
<p><img src="C27E8BC3D75646EEA89BDB88AAB0FCE5" alt="image"></p>
<h2 id="v-if-和-v-show">v-if 和 v-show</h2>
<ul>
<li>v-if 每次都会重新删除或创建新元素，有较高的切换性能消耗</li>
<li>v-shwo 则不会，只是切换了元素的 display:none 样式，有较高的初始渲染消耗</li>
</ul>
<p>总结：</p>
<ul>
<li>如果元素经常切换，最好使用 v-show</li>
<li>如果元素可能永远不会被显示出来给用户看，最好使用 v-if</li>
</ul>
<pre><code class="language-html">&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;切换&quot; @click=&quot;flag=!flag&quot;/&gt;
        &lt;h3 v-if=&quot;flag&quot;&gt;这是用v-if控制的元素&lt;/h3&gt;
        &lt;h3 v-show=&quot;flag&quot;&gt;这是用v-show控制的元素&lt;/h3&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true
            },
            methods:{}
        })
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>@click=&quot;flag=!flag&rdquo; 是一种更简单的写法，也可以用事件控制来改变 flag 值</p>
<h2 id="总结-变量表达式还是值">总结-变量（表达式）还是值</h2>
<ul>
<li>有冒号的，是变量（表达式），如：:name=&quot;name&rdquo;</li>
<li>没有冒号的，是普通的值，如：name=&quot;ls&rdquo; ——20191004</li>
</ul>

    </div>
    <div class="article-footer">
<blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    <li class="post-copyright-link hidden-xs">
      <strong>Permalink: </strong>
      <a href="https://rulerLwx.gitee.io/2020/07/java-front-vue-1/" title="Java-front-VUE-1" target="_blank" rel="external">https://rulerLwx.gitee.io/2020/07/java-front-vue-1/</a>
    </li>
    <li class="post-copyright-license">
      <strong>License：</strong><a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN</a>
    </li>
  </ul>
</blockquote>

<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://gitee.com/rulerLwx" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="https://rulerLwx.gitee.io/avatar.png" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://gitee.com/rulerLwx" target="_blank"><span class="text-dark">rulerLwx</span><small class="ml-1x">thinking...</small></a></h3>
        <div>Good Good Study, Day Day Up~</div>
      </div>
    </figure>
  </div>
</div>
    </div>
  </article>
<section id="comments">
    <div id="vcomments"></div>
</section>

</div><nav class="bar bar-footer clearfix" data-stick-bottom>
    <div class="bar-inner">
        <ul class="pager pull-left">
            <li class="prev">
                <a href="https://rulerLwx.gitee.io/2020/07/java-front-vue-2/" title="Java-front-VUE-2"><i
                        class="icon icon-angle-left"
                        aria-hidden="true"></i><span>&nbsp;&nbsp;Older</span></a>
            </li>
            <li class="next">
                <a href="https://rulerLwx.gitee.io/2020/07/java-front-jquery/"
                    title="Java-front-JQuery"><span>Newer&nbsp;&nbsp;</span><i
                        class="icon icon-angle-right" aria-hidden="true"></i></a>
            </li>
            
            <li class="toggle-toc">
                <a class="toggle-btn collapsed" data-toggle="collapse" href="#collapseToc" aria-expanded="false"
                    title="Catalogue" role="button">
                    <span>[&nbsp;</span><span>Catalogue</span>
                    <i class="text-collapsed icon icon-anchor"></i>
                    <i class="text-in icon icon-close"></i>
                    <span>]</span>
                </a>
            </li>
        </ul>
        <div class="bar-right">
            <div class="share-component" data-sites="weibo,qq,wechat"
                data-mobile-sites="weibo,qq,qzone"></div>
        </div>
    </div>
</nav>

</main><footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
<ul class="social-links">
    <li><a href="https://gitee.com/rulerLwx" target="_blank" title="gitee" data-toggle=tooltip data-placement=top >
            <i class="icon icon-gitee"></i></a></li>
    <li><a href="https://github.com/wolf-lea" target="_blank" title="github" data-toggle=tooltip data-placement=top >
            <i class="icon icon-github"></i></a></li>
</ul>
  <div class="copyright">
    &copy;2020  -
    2020
    <div class="publishby">
        Theme by <a href="https://github.com/xiaoheiAh" target="_blank"> xiaoheiAh </a>base on<a href="https://github.com/xiaoheiAh/hugo-theme-pure" target="_blank"> pure</a>.
    </div>
  </div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_SVG"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
            showMathMenu: false, //disables context menu
            tex2jax: {
            inlineMath: [ ['$','$'], ['\\(','\\)'] ]
           }
    });
</script>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/highlight.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/python.min.js" defer></script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/javascript.min.js" defer></script><script>
    hljs.configure({
        tabReplace: '    ', 
        classPrefix: ''     
        
    })
    hljs.initHighlightingOnLoad();
</script>
<script src="https://rulerLwx.gitee.io/js/application.min.bdeb64b910570b6c41badc6a05b7afb0c8ad9efd8525de3c7257d59e786326a3.js"></script>
<script src="https://rulerLwx.gitee.io/js/plugin.min.51ff8c7317566f82259170fa36e09c4493adc9b9378b427a01ad3f017ebac7dd.js"></script>

<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: 'Posts',
                PAGES: 'Pages',
                CATEGORIES: 'Categories',
                TAGS: 'Tags',
                UNTITLED: '(Untitled)',
            },
            ROOT_URL: 'https:\/\/rulerLwx.gitee.io',
            CONTENT_URL: 'https:\/\/rulerLwx.gitee.io\/searchindex.json ',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script type="text/javascript" src="https://rulerLwx.gitee.io/js/insight.min.a343cd9a5a7698336b28ef3a7c16a3a1b1d2d5fb17dc8ed04022bbe08cc5459073a15bdafa3a8a58cdd56080784bdd69fa70b1ae8597565c799c57ed00f0e120.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script>
<script>
    tocbot.init({
        
        tocSelector: '.js-toc',
        
        contentSelector: '.js-toc-content',
        
        headingSelector: 'h1, h2, h3',
        
        hasInnerContainers: true,
    });
</script>

<script src="https://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine"></script>
<script type="text/javascript">
    var GUEST = ['nick', 'mail', 'link'];
    var meta = 'nick,mail';
    meta = meta.split(',').filter(function (item) {
        return GUEST.indexOf(item) > -1;
    });
    new Valine({
        el: '#vcomments',
        verify: null ,
        notify: null ,
        appId: 'IyAB0PSPRazTPDxitO1ddQ7O-gzGzoHsz',
        appKey: '5rBJTq4KidYF33eXwvRVhtEH',
        placeholder: 'enjoy~',
        avatar: 'mm',
        meta: meta,
        pageSize: '10' || 10,
        visitor: false 
});
</script>

  </body>
</html>
